<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>游戏跳跃 - GameHop</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css"
        integrity="sha512-dMUQinc1gbNb95AFtKtP4q/g56T8r9oDxlWy0hrHyzfUbMq/vQztAqaR/FDY/bY0R1Ikc30aq94jyQH2Ix++ug=="
        crossorigin="anonymous" />

<link href="app.css" rel="stylesheet"></head>

<body id="body">
    <script src="chs.js"></script>
    <script src="//g8hh.com/zh/core.js"></script>
    <!-- Load all templates-->
    <script type="text/html" id="boolean-setting-template">
    <td data-bind="text: $data.displayName">setting name</td>
    <td>
        <input class="clickable" type="checkbox"
               data-bind="checked: $data.value, attr: {name}"
               onchange="() => $data.set(this.checked)"/>
    </td>
</script>

    <script type="text/html" id="campaign-offer-template">
    <div class="campaignOffer">
        <p>
            <span data-bind="text: $data.description">Description</span>
            <span data-bind="text: $data.monthsToComplete.toFixed(2)">Time</span> Months
            $<span data-bind="text: $data.cost.amount.toFixed(2)">Cost</span>
            <span data-bind="text: $data.fameReward.toFixed(2)">Fame</span> Fame

        </p>

        <!-- ko if: $data.isStarted -->
        <span data-bind="text: ($data.getProgressPercentage() * 100).toFixed(0) + '%'"></span>
        <div class="progressBar" data-bind="style: {width: $data.getProgressPercentage() * 100 + '%'}">

        </div>
        <!-- /ko -->
        <!-- ko ifnot: $data.isStarted -->
        <button style="cursor: pointer;" data-bind="click: () => $data.tryToStart()">[Start]</button>
        <button style="cursor: pointer;" data-bind="click: () => $data.cancel()">[Cancel]</button>
        <!-- /ko -->

    </div>
</script>

    <script type="text/html" id="upgrade-template">
    <div class="upgrade" style="margin-bottom:10px;"data-bind="click: () => $data.buy(), css: {'upgrade-bought': $data.isMaxLevel()}" >
            <p style="margin:0;" data-bind="text: $data.displayName">Name</p>
            <!-- ko if: !$data.isMaxLevel() -->
                <span style="font-size: .8rem;" data-bind="template: { name: 'currency-template', data: $data.getCost() }"></span>
            <!-- /ko -->
    </div>
</script>

    <script type="text/html" id="currency-template">
    <span data-bind="text: $data.amount.toFixed(2) + ' ' + $data.getTypeString()">Amount</span>
</script>



    <div class="tv">
        <div id="term">
            <div class="currency-bar">
                <div class="wallet">
    <div class="currency">[Budget: <span data-bind="text: '$' + budget.yearlyBudget.toFixed(2) + ']'"></span></div>
    <div class="currency">[Money: <span data-bind="text: '$' + wallet.currencies[0].toFixed(2) + ']'"></span></div>
    <div class="currency">[Prestige: <span data-bind="text: wallet.currencies[1].toFixed(2) + ']'"></span></div>
</div>

            </div>

            <div class="progress-bar">
                <!-- main progress bar display -->
                <div class="barRoot">
    <!-- ko ifnot: yearTracker.yearHasEnded -->
    <div class="yearLabel">
        Year <span data-bind="text: yearTracker.currentYear"></span>
    </div>
    <div class="monthLabel">
        <span data-bind="text: yearTracker.monthNames[yearTracker.month]"></span>
        <span data-bind="text: yearTracker.month + 1"></span>/12
    </div>
    <div class="progressBarOuter">
        <div class="progressBarInner" data-bind="style: {width: yearTracker.monthProgress * 100 + '%'}"></div>
    </div>
    <span data-bind="text: (yearTracker.monthProgress * 100).toFixed(0) + '%'"></span>
    <!-- /ko -->
    <!-- ko if: yearTracker.yearHasEnded -->
    <button class='startNewYearBtn' data-bind="click: () => getController('year-tracker').startNewYear()">Start a new year</button>
    <!-- /ko -->
    <!-- ko if: miniGames.allRequirementsCompleted() -->
    <button class='startNewYearBtn' data-bind="click: () => yearTracker.endYearEarly()">End the year</button>
    <!-- /ko -->

</div>

            </div>

            <div id="menu">
                <div id="jobsPanel-label" class="nav activeNav" data-target="jobsPanel">Jobs</div>
                <div id="reportPanel-label" class="nav" data-target="reportPanel">Report</div>
                <div class="nav" data-target="skillTreePanel">Prestige Shop</div>
                <div class="nav" data-target="settingsPanel">Settings</div>
            </div>

            <div id="jobsPanel" class="panel activePanel">

                <!-- ko if: miniGames.bugFixing.canAccess() -->
                <div class='minigame'><div class="minigameProgress">
    BugHunters - Bugs Fixed: <span data-bind="text: miniGames.bugFixing.yearRequirements[0].getProgressString()"></span>
</div>

<div class="minigameTask">
    <p>Lane <span data-bind="text: miniGames.bugFixing.actualCursor + 1"></span></p>

    <button class='btn' id="bugUpBtn" data-bind="click: () => miniGames.bugFixing.moveUp()">
        [Up ($<span data-bind="text: miniGames.bugFixing.getSwitchCost().amount.toFixed(2)"></span>)]
    </button>
    <button class='btn' id="bugDownBtn" data-bind="click: () => miniGames.bugFixing.moveDown()">
        [Down ($<span data-bind="text: miniGames.bugFixing.getSwitchCost().amount.toFixed(2)"></span>)]
    </button>

    <div class="bugfixingLanes">
        <!-- ko if: miniGames.bugFixing.actualCursor === 0 -->
        <img src="34d3aa616f3a500b78147b360daa1531.png" width='36px'/>
        <!-- /ko -->
        <div class="lane" data-bind="foreach: miniGames.bugFixing.getBugsOnLane(0)">
            <div class="bug" data-bind="style: {left: $data.position.toFixed(2) * 100 + '%'}"></div>
        </div>

        <!-- ko if: miniGames.bugFixing.actualCursor === 1 -->
        <img src="34d3aa616f3a500b78147b360daa1531.png" width='36px'/>
        <!-- /ko -->
        <div class="lane" data-bind="foreach: miniGames.bugFixing.getBugsOnLane(1)">
            <div class="bug" data-bind="style: {left: $data.position.toFixed(2) * 100 + '%'}"></div>
        </div>

        <!-- ko if: miniGames.bugFixing.actualCursor === 2 -->
        <img src="34d3aa616f3a500b78147b360daa1531.png" width='36px'/>
        <!-- /ko -->
        <div class="lane" data-bind="foreach: miniGames.bugFixing.getBugsOnLane(2)">
            <div class="bug" data-bind="style: {left: $data.position.toFixed(2) * 100 + '%'}"></div>
        </div>

        <!-- ko if: miniGames.bugFixing.actualCursor === 3 -->
        <img src="34d3aa616f3a500b78147b360daa1531.png" width='36px'/>
        <!-- /ko -->
        <div class="lane" data-bind="foreach: miniGames.bugFixing.getBugsOnLane(3)">
            <div class="bug" data-bind="style: {left: $data.position.toFixed(2) * 100 + '%'}"></div>
        </div>
    </div>
</div>

<!-- ko if: prestige.getUpgrade('global-unlock-minigame-upgrades').isBought() -->
<div class="minigameUpgrades">
    <div data-bind="template: { name: 'upgrade-template', foreach: miniGames.bugFixing.upgrades }"></div>
</div>
<!-- /ko -->



</div>
                <!-- /ko -->
                <!-- ko ifnot: miniGames.bugFixing.canAccess() -->
                <div class='minigame'><div class="locked">
    <img src="6c0ed6851aa3af3f99dc5ce296a49661.png"/>
    <p>This job is locked!</p>
</div>
</div>
                <!-- /ko -->


                <!-- ko if: miniGames.balancing.canAccess() -->
                <div class='minigame'><div class="balancingMinigame">

    <div class="minigameProgress">
        DevoDevs - Focus: <span data-bind="text: miniGames.balancing.yearRequirements[0].getProgressString()"></span>
    </div>

    <div style="padding-left: 20px; padding-right: 20px" class="minigameTask">
        <div class="balanceScale">
            <div class="balanceActual" data-bind="style: {left: miniGames.balancing.actualCursor.toFixed(2) * 100 + '%'}"></div>
            <div class="balanceTarget" data-bind="style: {left: miniGames.balancing.targetCursor.toFixed(2) * 100 + '%'}"></div>
        </div>


        <button class='btn' id="balanceLeftBtn" data-bind="click: () => miniGames.balancing.moveLeft()">[Left]</button>
        <button class='btn' id="balanceStopBtn" data-bind="click: () => miniGames.balancing.stopMovement()">[Stop (Space)]</button>
        <button class='btn' id="balanceRightBtn" data-bind="click: () => miniGames.balancing.moveRight()">[Right]</button>

        <p>
            Actual:
            <span data-bind="text: miniGames.balancing.actualCursor.toFixed(2)">Actual Cursor</span>
            Target:
            <span data-bind="text: miniGames.balancing.targetCursor.toFixed(2)">Target Cursor</span>
        </p>
    </div>


    <!-- ko if: prestige.getUpgrade('global-unlock-minigame-upgrades').isBought() -->
    <div class="minigameUpgrades">
        <div data-bind="template: { name: 'upgrade-template', foreach: miniGames.balancing.upgrades }"></div>
    </div>
    <!-- /ko -->


</div>
</div>
                <!-- /ko -->
                <!-- ko ifnot: miniGames.balancing.canAccess() -->
                <div class='minigame'><div class="locked">
    <img src="6c0ed6851aa3af3f99dc5ce296a49661.png"/>
    <p>This job is locked!</p>
</div>
</div>
                <!-- /ko -->


                <!-- ko if: miniGames.marketing.canAccess() -->
                <div class='minigame'><div class="marketingMinigame">

    <div class="minigameProgress">
        Marketeers - Fame: <span data-bind="text: miniGames.marketing.yearRequirements[0].getProgressString()"></span>
    </div>

    <div class="minigameTask">
        <p>Campaign Offers</p>
        <div data-bind="template: { name: 'campaign-offer-template', foreach: miniGames.marketing.availableCampaigns }">
        </div>
    </div>

    <!-- ko if: prestige.getUpgrade('global-unlock-minigame-upgrades').isBought() -->
    <div class="minigameUpgrades">
        <div data-bind="template: { name: 'upgrade-template', foreach: miniGames.marketing.upgrades }"></div>
    </div>
    <!-- /ko -->
</div>
</div>
                <!-- /ko -->
                <!-- ko ifnot: miniGames.marketing.canAccess() -->
                <div class='minigame'><div class="locked">
    <img src="6c0ed6851aa3af3f99dc5ce296a49661.png"/>
    <p>This job is locked!</p>
</div>
</div>
                <!-- /ko -->


                <!-- ko if: miniGames.design.canAccess() -->
                <div class='minigame'><div class="designMinigame">

     <div class="minigameProgress">
          Designs: <span data-bind="text: miniGames.design.yearRequirements[0].getProgressString()"> Progress</span>
     </div>
     <!--    Stupid webpack not bundling ko images correctly -->
     <div class="minigameTask">

          <!-- ko if: miniGames.design.targetShape.shape == "Circle" -->

          <img src="1f62ca52d9c6e2e8d558f706e647da31.png"
               data-bind="attr:{class: 'design-shape-' + miniGames.design.targetShape.color.toLowerCase()}">
          <!-- /ko -->
          <!-- ko if: miniGames.design.targetShape.shape == "Triangle" -->
          <img src="305a80e832d264db69bdf723f44328a7.png"
               data-bind="attr:{class: 'design-shape-' + miniGames.design.targetShape.color.toLowerCase()}">
          <!-- /ko -->
          <!-- ko if: miniGames.design.targetShape.shape == "Square" -->
          <img src="f5deac47be4e0fd0018670fd19678366.png"
               data-bind="attr:{class: 'design-shape-' + miniGames.design.targetShape.color.toLowerCase()}">
          <!-- /ko -->
          <!-- ko if: miniGames.design.targetShape.shape == "Pentagon" -->
          <img src="be50bbf57631ae7b23157d62454dd92d.png"
               data-bind="attr:{class: 'design-shape-' + miniGames.design.targetShape.color.toLowerCase()}">
          <!-- /ko -->
          <!-- ko if: miniGames.design.targetShape.shape == "Hexagon" -->
          <img src="edd4294922ee1484c9d14dc1db25f2c5.png"
               data-bind="attr:{class: 'design-shape-' + miniGames.design.targetShape.color.toLowerCase()}">
          <!-- /ko -->


          <div class="designButtons" data-bind="foreach: miniGames.design.shapeOptions">
               <button data-bind="click: () => $data.guess()">
                    [ <span data-bind="text: $data.toString()">Description</span> ]
               </button>
          </div>

     </div>

     <!-- ko if: prestige.getUpgrade('global-unlock-minigame-upgrades').isBought() -->
     <div class="minigameUpgrades">
          <div data-bind="template: { name: 'upgrade-template', foreach: miniGames.design.upgrades }"></div>
     </div>
     <!-- /ko -->


</div>
</div>
                <!-- /ko -->
                <!-- ko ifnot: miniGames.design.canAccess() -->
                <div class='minigame'><div class="locked">
    <img src="6c0ed6851aa3af3f99dc5ce296a49661.png"/>
    <p>This job is locked!</p>
</div>
</div>
                <!-- /ko -->


            </div>

            <div id="reportPanel" class="panel hiddenPanel">
                <div class="eoyreport">


    <!-- ko if: miniGames.endOfYearReport == null -->
    Finish your first year to see your report.
    <!-- /ko -->
    <!-- ko ifnot: miniGames.endOfYearReport == null -->

    <p style="font-size:2rem;text-align:center;">Year <span data-bind="text: miniGames.endOfYearReport.year"></span> Report</p>
    <div class="grid-x">
        <div class="cell large-3">
            <p>Description</p>
        </div>
        <div class="cell large-3">
            <p>Actual</p>
        </div>
        <div class="cell large-3">
            <p>Target</p>
        </div>
        <div class="cell large-3">
            <p>Reward</p>
        </div>
    </div>

    <div class="grid-x" data-bind="foreach: miniGames.endOfYearReport.reports">
        <div class="cell large-3">
            <span data-bind="text: $data.description"></span>
            <span data-bind="text: '(' + ($data.getPercentage() * 100).toFixed(0) + '%)'"></span>
        </div>
        <div class="cell large-3">
            <p data-bind="text: $data.actual.toFixed(2)"></p>
        </div>
        <div class="cell large-3">
            <p data-bind="text: $data.target.toFixed(2)"></p>
        </div>
        <div class="cell large-3">
            <span data-bind="text: $data.getReward().toFixed(2)"></span><span> Prestige Points</span>
        </div>
    </div>

    <div class="grid-x">
        <div class="cell large-3">
            <p>Completion Bonus</p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p>
                <span data-bind="text: miniGames.endOfYearReport.getCompletionBonus().toFixed(2)"></span> Prestige
                Points
            </p>
        </div>
    </div>

    <div class="grid-x">
        <div class="cell large-3">
            <p>Prestige Upgrades Multiplier</p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p>
                <span data-bind="text: miniGames.endOfYearReport.multiplier.toFixed(2)"></span>x
            </p>
        </div>
    </div>

    <div class="grid-x">
        <div class="cell large-3">
            <p>Budget Multiplier</p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p>
                <span data-bind="text: miniGames.endOfYearReport.budgetMultiplier.toFixed(2)"></span>x
            </p>
        </div>
    </div>
    <hr>
    <div class="grid-x">
        <div class="cell large-3">
            <p>Total</p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p>
                <span data-bind="text: miniGames.endOfYearReport.getTotalReward().toFixed(2)"></span> Prestige Points
            </p>
        </div>
    </div>

    <!-- ko if: miniGames.endOfYearReport.isCompleted() -->
    <br>
    <br>
    <br>

    <div class="grid-x">
        <div class="cell large-3">
            <p>Previous Budget</p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p>
                $<span
                    data-bind="text: (budget.yearlyBudget + miniGames.endOfYearReport.getSurplus()).toFixed(2)"></span>
            </p>
        </div>
    </div>

    <div class="grid-x">
        <div class="cell large-3">
            <p>Surplus</p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p>
                $<span data-bind="text: miniGames.endOfYearReport.getSurplus().toFixed(2)"></span>
            </p>
        </div>
    </div>

    <hr>

    <div class="grid-x">
        <div class="cell large-3">
            <p>New Budget</p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p></p>
        </div>
        <div class="cell large-3">
            <p>
                $<span data-bind="text: budget.yearlyBudget.toFixed(2)"></span>
            </p>
        </div>
    </div>
    <!-- /ko -->
    <!-- ko ifnot: miniGames.endOfYearReport.isCompleted() -->
    <p>You did not meet the requirements for this year, so your budget will not shrink</p>
    <!-- /ko -->


    <!-- ko if: yearTracker.yearHasEnded -->
    <button class='startNewYearBtn' data-bind="click: () => getController('year-tracker').startNewYear()">Start a
        new
        year
    </button>
    <!-- /ko -->

    <!-- /ko -->

</div>

            </div>

            <div id="skillTreePanel" class="panel hiddenPanel">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1181px"
     height="948px" viewBox="-0.5 -0.5 1181 948">
    <defs/>
    <g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('design-reduce-wrong-penalty-2')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="430" cy="40" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 40px; margin-left: 391px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('design-prestige-multiplier')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="550" cy="40" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 40px; margin-left: 511px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <path d="M 470 40 L 503.63 40" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 508.88 40 L 501.88 43.5 L 503.63 40 L 501.88 36.5 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('design-remove-option-2')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="670" cy="40" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 40px; margin-left: 631px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>


        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('design-reduce-wrong-penalty-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="670" cy="150" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 150px; margin-left: 631px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>


        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('design-remove-option-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="550" cy="190" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 190px; margin-left: 511px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>


        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('design-value-2')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="430" cy="150" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 150px; margin-left: 391px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('design-minigame-upgrade-cost')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="330" cy="150" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 150px; margin-left: 291px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>


        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('design-value-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="550" cy="300" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 300px; margin-left: 511px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('global-yearly-requirements')">
                    <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="430" cy="300" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 300px; margin-left: 391px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()" class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>


        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('development-focus-gain-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="430" cy="400" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 400px; margin-left: 391px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('global-minigame-upgrade-cost')">
                    <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="430" cy="500" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 500px; margin-left: 391px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()" class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>


        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('development-movement-speed-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="330" cy="350" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 350px; margin-left: 291px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>
        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('development-reduce-target-movement-2')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="330" cy="460" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 460px; margin-left: 291px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('development-focus-gain-2')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="240" cy="500" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 500px; margin-left: 201px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('development-minigame-upgrade-cost-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="240" cy="400" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 400px; margin-left: 201px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('development-reduce-target-movement-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="240" cy="300" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 300px; margin-left: 201px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('development-movement-speed-2')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="150" cy="350" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 350px; margin-left: 111px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('development-prestige-upgrade-cost')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="150" cy="460" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 460px; margin-left: 111px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>


        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('development-reduce-target-movement-3')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="50" cy="350" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 350px; margin-left: 11px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <path d="M 430 110 L 430 86.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 430 81.12 L 433.5 88.12 L 430 86.37 L 426.5 88.12 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 390 150 L 376.37 150" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 371.12 150 L 378.12 146.5 L 376.37 150 L 378.12 153.5 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 514.33 171.9 L 475.71 152.82" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 471 150.5 L 478.83 150.46 L 475.71 152.82 L 475.73 156.73 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 585.67 171.9 L 624.29 152.82" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 629 150.5 L 624.27 156.73 L 624.29 152.82 L 621.17 150.46 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 670 110 L 670 86.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 670 81.12 L 673.5 88.12 L 670 86.37 L 666.5 88.12 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('global-unlock-minigame-upgrades')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="550" cy="400" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 400px; margin-left: 511px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('debugging-reduce-movement-cost-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="550" cy="500" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 500px; margin-left: 511px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('debugging-reduce-lane-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="550" cy="600" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 600px; margin-left: 511px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('debugging-reduce-movement-cost-2')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="430" cy="680" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 680px; margin-left: 391px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('debugging-improve-value-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="670" cy="680" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 680px; margin-left: 631px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('global-prestige-upgrade-cost')">
                    <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="670" cy="300" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 300px; margin-left: 631px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()" class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>



        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('marketing-fame-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="670" cy="400" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 400px; margin-left: 631px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() + ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('global-prestige-multiplier')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="670" cy="500" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 500px; margin-left: 631px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <path d="M 550 260 L 550 236.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 550 231.12 L 553.5 238.12 L 550 236.37 L 546.5 238.12 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 510 300 L 476.37 300" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 471.12 300 L 478.12 296.5 L 476.37 300 L 478.12 303.5 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 550 360 L 550 346.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 550 341.12 L 553.5 348.12 L 550 346.37 L 546.5 348.12 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 590 300 L 623.63 300" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 628.88 300 L 621.88 303.5 L 623.63 300 L 621.88 296.5 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 670 360 L 670 346.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 670 341.12 L 673.5 348.12 L 670 346.37 L 666.5 348.12 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 430 360 L 430 346.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 430 341.12 L 433.5 348.12 L 430 346.37 L 426.5 348.12 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 510 400 L 476.37 400" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 471.12 400 L 478.12 396.5 L 476.37 400 L 478.12 403.5 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 590 400 L 623.63 400" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 628.88 400 L 621.88 403.5 L 623.63 400 L 621.88 396.5 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 550 440 L 550 453.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 550 458.88 L 546.5 451.88 L 550 453.63 L 553.5 451.88 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 510 500 L 476.37 500" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 471.12 500 L 478.12 496.5 L 476.37 500 L 478.12 503.5 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 590 500 L 623.63 500" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 628.88 500 L 621.88 503.5 L 623.63 500 L 621.88 496.5 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 550 540 L 550 553.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 550 558.88 L 546.5 551.88 L 550 553.63 L 553.5 551.88 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 521.72 628.28 L 464.26 649.51" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 459.33 651.33 L 464.69 645.62 L 464.26 649.51 L 467.11 652.19 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 578.28 628.28 L 635.74 649.51" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 640.67 651.33 L 632.89 652.19 L 635.74 649.51 L 635.31 645.62 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 390 400 L 363.54 381.88" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 359.21 378.92 L 366.96 379.98 L 363.54 381.88 L 363.01 385.76 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 390 400 L 362.79 427.21" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 359.07 430.93 L 361.55 423.5 L 362.79 427.21 L 366.5 428.45 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 301.72 321.72 L 284.5 304.5" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 280.79 300.79 L 288.22 303.27 L 284.5 304.5 L 283.27 308.22 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 301.72 378.28 L 284.5 395.5" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 280.79 399.21 L 283.27 391.78 L 284.5 395.5 L 288.22 396.73 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 301.72 488.28 L 285.6 496.98" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 280.98 499.47 L 285.48 493.07 L 285.6 496.98 L 288.81 499.23 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 211.72 371.72 L 194.5 354.5" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 190.79 350.79 L 198.22 353.27 L 194.5 354.5 L 193.27 358.22 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 211.72 428.28 L 193.6 454.75" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 190.63 459.08 L 191.7 451.32 L 193.6 454.75 L 197.47 455.28 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 110 350 L 96.37 350" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 91.12 350 L 98.12 346.5 L 96.37 350 L 98.12 353.5 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('marketing-speed-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="780" cy="350" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 350px; margin-left: 741px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('marketing-cost-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="780" cy="460" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 460px; margin-left: 741px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>


        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('marketing-minigame-upgrade-cost')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="880" cy="300" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 300px; margin-left: 841px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('marketing-upgrade-cost-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="880" cy="400" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 400px; margin-left: 841px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>


        <path d="M 710 400 L 736.72 355.46" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 739.42 350.96 L 738.82 358.76 L 736.72 355.46 L 732.82 355.16 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 710 400 L 737.15 454.3" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 739.5 459 L 733.24 454.3 L 737.15 454.3 L 739.5 451.17 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 820 350 L 846.46 368.12" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 850.79 371.08 L 843.04 370.02 L 846.46 368.12 L 846.99 364.24 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 820 460 L 847.21 432.79" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 850.93 429.07 L 848.45 436.5 L 847.21 432.79 L 843.5 431.55 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 880 360 L 880 346.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 880 341.12 L 883.5 348.12 L 880 346.37 L 876.5 348.12 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('marketing-fame-2')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="990" cy="460" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 460px; margin-left: 951px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('marketing-speed-2')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="990" cy="360" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 360px; margin-left: 951px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>


        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('marketing-cost-2')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="990" cy="560" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 560px; margin-left: 951px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>


        <path d="M 820 460 L 943.63 460" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 948.88 460 L 941.88 463.5 L 943.63 460 L 941.88 456.5 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 990 500 L 990 513.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 990 518.88 L 986.5 511.88 L 990 513.63 L 993.5 511.88 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 990 420 L 990 406.37" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 990 401.12 L 993.5 408.12 L 990 406.37 L 986.5 408.12 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 670 440 L 670 453.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 670 458.88 L 666.5 451.88 L 670 453.63 L 673.5 451.88 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 430 440 L 430 453.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 430 458.88 L 426.5 451.88 L 430 453.63 L 433.5 451.88 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('debugging-improve-value-2')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="670" cy="800" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 800px; margin-left: 631px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <path d="M 670 720 L 670 753.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 670 758.88 L 666.5 751.88 L 670 753.63 L 673.5 751.88 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('debugging-improve-spawn-1')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="550" cy="720" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 720px; margin-left: 511px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <path d="M 550 640 L 550 673.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 550 678.88 L 546.5 671.88 L 550 673.63 L 553.5 671.88 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('debugging-reduce-yearly-requirements')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="670" cy="907" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 907px; margin-left: 631px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <path d="M 670 840 L 670 860.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 670 865.88 L 666.5 858.88 L 670 860.63 L 673.5 858.88 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('debugging-reduce-lane-2')">
            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="430" cy="790" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 790px; margin-left: 391px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>

        <g class="prestige-upgrade-root" data-bind="with: prestige.getUpgrade('debugging-reduce-movement-cost-3')">

            <title data-bind="text: $data.getDisplayName() + ' ' + $data.getLongCostString()"></title>
            <g data-bind="click: () => $data.buy()">
                <ellipse
                        data-bind="css: {'prestige-upgrade-bought': $data.isBought(), 'prestige-upgrade-locked': !$data.requirementsCompleted()}"
                        cx="550" cy="827" rx="40" ry="40" stroke="#000000" pointer-events="all"/>
                <g transform="translate(-0.5 -0.5)">

                    <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                                   height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                        <div xmlns="http://www.w3.org/1999/xhtml"
                             class="prestige-upgrade-container" style="padding-top: 827px; margin-left: 511px;">
                            <div class="prestige-upgrade-parent">
                                <div data-bind="text: $data.getDisplayName() +  ' ' + $data.getShortCostString()"
                                     class="prestige-upgrade-text">
                                </div>
                            </div>
                        </div>
                    </foreignObject>
                </g>
            </g>
        </g>


        <path d="M 550 760 L 550 780.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 550 785.88 L 546.5 778.88 L 550 780.63 L 553.5 778.88 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 430 720 L 430 743.63" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 430 748.88 L 426.5 741.88 L 430 743.63 L 433.5 741.88 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 458.28 818.28 L 503.72 825.94" fill="none" stroke="#000000" stroke-miterlimit="10"
              pointer-events="stroke"/>
        <path d="M 508.9 826.81 L 501.41 829.1 L 503.72 825.94 L 502.58 822.2 Z" fill="#000000" stroke="#000000"
              stroke-miterlimit="10" pointer-events="all"/>
        <rect x="250" y="40" width="140" height="50" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                               height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml"
                         style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 65px; margin-left: 251px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                <span style="font-size: 36px">Design</span>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="320" y="69" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Design
                </text>
            </switch>
        </g>
        <rect x="0" y="540" width="250" height="50" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                               height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml"
                         style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 248px; height: 1px; padding-top: 565px; margin-left: 1px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                <span style="font-size: 36px">Development</span>
                                <span style="color: rgba(0 , 0 , 0 , 0) ; font-family: monospace ; font-size: 0px">
                                    %3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22%26lt%3Bspan%20style%3D%26quot%3Bfont-size%3A%2036px%26quot%3B%26gt%3BDesign%26lt%3B%2Fspan%26gt%3B%22%20style%3D%22text%3Bhtml%3D1%3BstrokeColor%3Dnone%3BfillColor%3Dnone%3Balign%3Dcenter%3BverticalAlign%3Dmiddle%3BwhiteSpace%3Dwrap%3Brounded%3D0%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22120%22%20y%3D%2230%22%20width%3D%22250%22%20height%3D%2250%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3E
                                </span>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="125" y="569" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Development%3CmxGraphModel%3E%3Croot%3E%3...
                </text>
            </switch>
        </g>
        <rect x="400" y="882" width="250" height="50" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                               height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml"
                         style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 248px; height: 1px; padding-top: 907px; margin-left: 401px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                <span style="font-size: 36px">Debugging</span>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="525" y="911" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Debugging
                </text>
            </switch>
        </g>
        <rect x="930" y="260" width="250" height="50" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%"
                               height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml"
                         style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 248px; height: 1px; padding-top: 285px; margin-left: 931px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                <span style="font-size: 36px">Marketing</span>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="1055" y="289" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Marketing
                </text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://desk.draw.io/support/solutions/articles/16000042487"
           target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text>
        </a>
    </switch>
</svg>

            </div>

            <div id="settingsPanel" class="panel hiddenPanel">
                <table class="table table-striped table-hover">
    <thead>
    <tr>
        <th>Setting</th>
        <th>Option</th>
    </tr>
    </thead>
    <tbody>
    <tr data-bind="template: { name: 'boolean-setting-template', data: settings.getSetting('crt-style')}"></tr>
    </tbody>
</table>
<br/>


                <button data-bind="click: () => save()">Save</button>
                <button data-bind="click: () => deleteSave()">Delete save (no confirmation)</button>

                <div style="margin:1rem;">

    <p>Created by <a target="_blank" href="https://github.com/Ishadijcks">IshaD</a> and <a target="_blank" href="https://www.bainegames.live">BaineGames</a>
        for the <a target="_blank" href="https://incremental_games.reddit.com/">r/incremental_games</a> 2020 Game Jam.</p>
    <p>Thanks for playing!</p>
</div>


            </div>
        </div>
    </div>
    <!-- ko if: settings.getSetting('crt-style').value -->
    <div class="flicker"></div>
    <div class="scanlines"></div>
    <!-- /ko -->


    <!-- MODALS -->

    <div class='customModal' id="introModal">
        <h2>Welcome to GameHop!</h2>
        <p>Your new role as Budget Master Battle Royale Supervisor is simple!
            Spend your money by the end of each year or lose it from your budget.
            You have four teams that will help you do this automatically as time goes on.
            But it is up to you how to best stretch every dollar.
        </p>
        <p>Our executives have opened up an expirimental prestige shop just for you to tinker around with. Check it out sometime.</p>
        <p>Can you make this company efficient enough to run itself on a shoestring budget?</p>
        <p>You win the game when you complete a year with a budget of $0</p>
        <p>Let’s get you started and introduce you to your first team, our very own GameHop BugHunters!</p>
        <button data-bind="click: () => {hideModal('introModal'); showModal('debugModal')}">Meet the team!</button>
    </div>

    <div class='customModal' id="debugModal">
        <h2>BugHunters</h2>
        <p>The BugHunters team role is simple.</p>
        <p>They have a reddit feed from r/softwaregore of all the bugs people find constantly flowing in.
        They take their mighty Hammers of Code and bring down the wrath onto the bugs.
        Watch them carefully as they don’t always stay in their own swimlane.</p>
        <p>If you need to put them on track, use the up and down arrow keys to jolt the BugHunters to the right lane.</p>
        <p>Be careful, that jolt costs money since cattle prods are not cheap!</p>
        <button data-bind="click: () => {hideModal('debugModal'); start()}">Begin the work!!</button>
    </div>

    <div class='customModal' id="marketModal">
        <h2>Marketeers</h2>
        <p>The Marketeers team is all about the PR. Not pull requests, but public relations! </p>
        <p>They brainstorm ideas for the company and suggest campaigns for you to dump money on to gain the company some more fame, which attracts <span style="text-decoration: line-through;">slaves</span> employees and patrons! </p>
        <p></p>Just click start the campaigns you like and cancel on the ones you don’t.</p>
        <button data-bind="click: () => {hideModal('marketModal'); startNewYear()}">Begin the work!!</button>
    </div>

    <div class='customModal' id="devModal">
        <h2>DevoDevs</h2>
        <p>The DevoDevs are the real blackbox of the company.</p>
        <p>We just constantly make sure they have the right amount of coffee to keep them focused.
        We give them caffeine and hold their razor keyboards hostage and they give us completed code! </p>
        <p>When you see their focus sliding off, use the left and right arrow keys to send them our own GameHop Patent Pending Pill blend of Caffeine, Monstar Energy, and Soda Tarts that we like to call F.0.0.D.
        F.0.0.D used to stand for what's in it, but our executive team changed that up and did not want to spend money on re-labeling old stock.</p>

        <button data-bind="click: () => {hideModal('devModal'); startNewYear()}">Begin the work!!</button>
    </div>

    <div class='customModal' id="designModal">
        <h2>Design</h2>
        <p>The Design team is basically a bunch of baristas from the local AstriskBucks with Wacon pens glued to their hands.</p>
        <p>They like to pump out a bunch of different designs for you to review.
        You simply have to click what best title fits their design.</p>
        <p>Remember, they are designers, not managers like you so their ability to read and write, even speak, has been diminished purposefully with science to move all of those skill points to drawing.</p>
        <p>We didn’t even bother to give them a cool name as they can't complain about it anyways!</p>

        <button data-bind="click: () => {hideModal('designModal'); startNewYear()}">Begin the work!!</button>
    </div>

    <div class='customModal' id="winModal">
        <h2>Holy Crap!</h2>
        <p>Honestly, we did not think you could do it. The last time we tried this with the previous guy, it took wayy longer and he eventually was sent back to <span style="text-decoration: line-through;">the dungeon</span> his home.</p>
        <p>Because we really didn't think you could do it, you don't really get a reward or anything other than a nice pat on the back.</p>
        <p>Congrats again - GameHop</p>
        <br><br>
        <p>You have completed the game in <span data-bind="text: yearTracker.currentYear - 1"></span> years!</p>
        <p>But can you do it faster?</p>
        <button data-bind="click: () => {deleteSave(); location.reload();}">Delete save and restart</button>


    </div>

<script src="bundle.js"></script></body>

</html>
<!--客服 开始-->
<script src="//g8hh.com/static/js/jquery.min.js"></script>
<link rel="stylesheet" href="//g8hh.com/static/css/kf.css" type="text/css" media="screen" charset="utf-8">
<script src="//g8hh.com/static/js/kf.js"></script>
<!-- 客服 结束 -->
<!--站长统计-->
<div style="display: none">
    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?dbb7ff142f4d4b68546c93b9cd6e9328";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
        </div>